Fix Bootstrap unequal column height

Question

I have a Boostrap row that contains a variable number of columns. This number of columns is controlled by a CMS so it can be a higher number of columns that wouldn't fit on one row.

I need to find a way to nicely display all the columns (f.e. with an equal height).

<div class='row'>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
 <div class="col-lg-2"></div>
</div>

Example

I already found some solutions to make all columns an equal height, however they don't work whenever you use more then 100% of the row to display columns.

• Ruben: what do you mean with "they don't work whenever you use more then 100% of the row"?
• cvrebert: css-tricks.com/fluid-width-equal-height-columns summarizes the available techniques.

Answer 1

You can remove the floats which won't make your heights the same but will correct the alignment

<div class='row panel-wrapper'> 

CSS

.panel-wrapper > .col-lg-2{
 float: none;
 display: inline-block;
}

As for heights not hard to find script to loop through a common element class and set equal heights

Answer 2

use a jQuery plugin:
https://github.com/liabru/jquery-match-height
it will calculate and set the correct heights

Answer 3

I assume Bootstrap is assigning widths with the class you have applied so you should remove that or reset it.

Then CSS tables can help.

This will make all the columns the same height and make the the same width. It will also automatically adjust their widths to fill the container row.

.myrow {
 display: table;
 width: 100%;
 table-layout: fixed;
}
.mycol {
 display: table-cell;
}

.mycol {
 height: 50px;
 border: 1px solid grey;
}
.myrow {
 display: table;
 width: 100%;
 table-layout: fixed;
}
.mycol {
 display: table-cell;
}

<div class='myrow'>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
</div>
<div class='myrow'>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
 <div class="mycol"></div>
</div>